<template>
    <van-icon :color="value? '#ffa500' :'#777'" :name="value ? 'star' : 'star-o'" :loading="loading"
        @click="onCollect" />
</template>

<script>
import { deleteCollect, addCollect } from '@/api/article'

export default {
    name: 'CollectArticle',
    props: {
        value: {
            type: Boolean,
            required: true
        },
        articleId: {
            type: [String, Number, Object],
            required: true
        }
    },
    data() {
        return {
            loading: true  // 收藏按钮加载状态，防止因为网络原因致使用户多次点击
        }
    },
    methods: {
        async onCollect() {
            this.loading = true
            try {
                if (this.value) {
                    // 已收藏，取消收藏
                    await deleteCollect(this.articleId)
                } else {
                    // 添加收藏
                    await addCollect(this.articleId)
                }

                // 更新视图
                this.$emit('input', !this.value)

                this.$toast.success(!this.value ? '收藏成功' : '取消收藏' )
            } catch (err) {
                this.$toast.fail('操作失败，请重试！')
            }
            this.loading = false
        }
    }
}
</script>

<style scoped lang="less">

</style>